<template>
	<view >
		<!-- 顶部操作条 -->
		<!-- 	<view class="cu-bar bg-white">
		<view class="action">
			<text class="cuIcon-back text-gray"></text> 返回
		</view>
		<view class="content text-bold">
			操作条
		</view>
		<view class="action">
			<text class="cuIcon-cardboardfill text-grey"></text>
			<text class="cuIcon-recordfill text-red"></text>
		</view>
	</view> -->

		<!-- 图片展示 -->
		<view>
			<cu-custom bgColor="bg-gradual-pink" :isBack="true" backRouterName="index">
				<block slot="backText">返回</block>
				<block slot="content">作品详情</block>

			</cu-custom>

			<view class="cu-card case ">
				<view class="cu-item shadow">
					<view class="image">
						<image
							:src="goodsInfo.goodsImg"
							mode="widthFix"></image>

					</view>
					<view class="flex solid-bottom justify-between   p-xs margin-bottom-sm mb-sm">
						<view class=" cu-item ">

							<view class="flex-sub ">

								<view class=" text-center  text-lg  text-black text-shadow text-bold ">
									<view class="  padding ">
										<text class="text-teal ">{{goodsInfo.goodName}}</text>
										
									</view>
									
								</view>
							</view>
						</view>
						<view class="cu-item  ">

							<view class="flex-sub">
								<view class="text-gray  text-sm flex justify-between margin-top-sm">
									<view class="cu-capsule 
									">
										<view class='cu-tag bg-brown sm'>
											限量
										</view>
										<view class="cu-tag line-brown sm">
											{{goodsInfo.goodsNum}}份
										</view>
									</view>
								</view>
								<view class="text-gray  text-sm flex justify-between margin-top-sm">

									<view class="cu-capsule">
										<view class='cu-tag bg-red sm'>
											限购
										</view>
										<view class="cu-tag line-red sm">
											{{goodsInfo.purchNum}}份
										</view>
									</view>
								</view>
							</view>
						</view>


					</view>

				</view>
			</view>

			<view class="cu-list menu-avatar comment solids-top ">
				<view class="cu-bar bg-white  ">
					<view class="action">
						<text class='cuIcon-title text-yellow'></text>作者介绍
					</view>
				</view>

				<view class="cu-item ">

					<view class="cu-avatar round" :style="'background-image:url('+authorInfo.image+');'">
					</view>
					<view class="content">

						<view class="text-black text-shadow text-xs ">
							{{authorInfo.name}}
						</view>
						<view class="text-gray  ">
							{{authorInfo.linkAddress}}
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action">
						<text class='cuIcon-title text-yellow'></text>产品描述
					</view>
				</view>
				<view class="cu-card case cu-item shadow">

					<view class="content">

						<view class="cu-bar bg-white">
							<view class="text-gray text-content text-df">
								{{goodsInfo.remark}}
							</view>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action">
						<text class='cuIcon-title text-yellow'></text>关于数字藏品
					</view>
				</view>
				<view class="cu-card case cu-item shadow">

					<view class="content">

						<view class="cu-bar bg-white">
							<view class="text-gray text-content text-df">
							数字藏品可以通俗理解为区块链凭证。通常是指开发者在以太坊平台上根据ERC721标准/协议所发行，特性为不可分割、不可替代、独一无二。数字藏品常见于文化艺术品领域、知识产权的链上发行、流转、确权等作用，能有效保护链上知识产权，防止篡改、造假等，是区块链技术的一类场景应用。
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="cu-timeline" :style="[{animation: 'show 0.6s 1'}]">
				<view class="cu-bar bg-white solid-bottom ">
					<view class="action">
						<text class='cuIcon-title text-yellow'></text>产品描述
					</view>
				</view>
				<view class="cu-item">
					<view class="content">
						{{goodsInfo.remark}}
					</view>
				</view>

			</view> -->

		</view>
		<view class="ljgm">


			<view class="cu-bar bg-white tabbar border shop">
				<button class="action" open-type="contact">

					<view class="solid-bottom text-xxl padding">
						<text class="text-price text-red">{{goodsInfo.price}}</text>
					</view>
				</button>

				<view class="btn-group-right">

					<button class="cu-btn bg-red round shadow-blur" v-if="!showBuy">{{showBuyText}}</button>
					<button class="cu-btn bg-red round shadow-blur"
						v-if="showBuy&&goodsInfo.goodsStatus=='2'" @click="toPage(goodsInfo.id)">立即购买</button>
					<button class="cu-btn bg-red round shadow-blur" v-if="goodsInfo.goodsStatus=='0'">已售完</button>
				</view>
			</view>
		</view>
		<!-- 作品介绍 -->
	</view>
</template>

<script>
	import apiService from '@/api/api.js';
	import dateUtil from '@/common/util/dateUtil.js';
	export default {
		data() {
			return {
				musicState: true,
				goodsInfo: {},
				authorInfo: {},
				showBuyText: null,
				showBuy: false,
				timer:''
			}
		},
		onLoad() {
			this.getGoodInfo();
			this.routeParam = this.$route.query;
			console.log("this.routeParam>>>", this.routeParam)
			this.getTime()
		},
		// 离开页面
		onUnload() {
		  this.stopTimer()
		},
		methods: {

			state() {
				if (this.musicState) {
					this.musicState = false
				} else {
					this.musicState = true
				}
			},
			getGoodInfo() {
				var resultList = []
				var param = {
					id: this.$route.query.id
				}
				apiService.mQueryGoodInfoById(param).then(res => {
					console.log("res::", res)
					if (res.data.success) {
						this.authorInfo = res.data.result.authorInfo
						this.goodsInfo = res.data.result.goodsInfo
						// console.log("this.msgCount", this.msgCount)
					}
				})
			},
			getTime() {
				var that = this;

				this.timer = setInterval(function() {
					var nowtime = new Date().getTime() //获取当前时间
					
					console.log('nowtime' + nowtime)
					console.log('startTimeMs' + that.goodsInfo.startTimeMs)
					console.log('re' + (nowtime - that.goodsInfo.startTimeMs > 0))
					if (nowtime - that.goodsInfo.startTimeMs > 0) {
						console.log('到点了')
						that.stopTimer()


						return that.showBuy = true;
					}

					
					if (!that.showBuy) {
						that.showBuyText = dateUtil.showtime(that.goodsInfo.startTimeMs);
					}

					// this.$set(this.showDateTime,dateUtil.showtime('2022-06-30 16:21:39'))

				}, 1000); //反复执行函数本身



			},
			stopTimer() {
				clearInterval(this.timer);
				
			},	toPage(id) {
				console.log(id)
				let parmas = {
					id: id
				}

				this.$router.push({
					name: 'payDetail',
					query: parmas
				})
			},


		}
	}
</script>

<style>

 </style>
